import Head from 'next/head';
import RowInstanceAPIsTable from '../../../components/prop-tables/RowInstanceAPIsTable';
import SourceCode from '../../../components/prop-tables/RowInstanceAPIsSource';
import OptionsSwitcher from '../../../example-groups/OptionsSwitcher';

<Head>
  <title>{'Row Instance APIs - Mantine React Table V2 Docs'}</title>
  <meta
    name="description"
    content="All the row instance methods and objects that can be accessed from the table instance in Mantine React Table"
  />
  <meta
    property="og:title"
    content="Mantine React Table Row Instance API Reference"
  />
  <meta
    property="og:description"
    content="A reference of all the row instance api methods and objects that can be used in Mantine React Table"
  />
</Head>

## Row Instance APIs

<OptionsSwitcher
  links={[
    {
      label: 'Table Instance APIs',
      value: 'table-instance-apis',
    },
    {
      label: 'Column Instance APIs',
      value: 'column-instance-apis',
    },
    {
      label: 'Row Instance APIs',
      value: 'row-instance-apis',
    },
    {
      label: 'Cell Instance APIs',
      value: 'cell-instance-apis',
    },
  ]}
/>

> NOTE: These are NOT [props](/docs/api/props) or [column options](/docs/api/column-options) for Mantine React Table. These are just static methods on a row instance that you can use.

Every row in the table has an associated row instance that can be accessed in many of the callback props that you can use to access a row's information and methods.

You can access and use a `row` object in quite a few places, but here are some of the most common:

```jsx
const columns = [
  {
    accessorKey: 'salary',
    header: 'Salary',
    //you can access a row instance in column definition option callbacks like this
    mantineEditTextFieldProps: ({ row }) => ({
      disabled: row.original.employmentStatus === 'Retired',
    }),
    //or in the component override callbacks like this
    Cell: ({ cell, row }) => (
      <div>
        {row.original.employmentStatus === 'Retired'
          ? 'Retired'
          : cell.getValue()}
      </div>
    ),
  },
];

const table = useMantineReactTable({
  columns,
  data,
  //or a row instance in callback props like this
  mantineSelectCheckboxProps: ({ row }) => ({
    disabled: row.original.isAccountActive === false,
  }),
  renderDetailPanel: ({ row }) => (
    <div>
      <span>First Name: {row.original.firstName}</span>
      <span>Last Name: {row.original.lastName}</span>
    </div>
  ),
});
```

<RowInstanceAPIsTable />

<SourceCode />
